/*
 * @Author: 孙文豪
 * @Description:
 * @Date: 2022-12-16 14:05:02
 * @LastEditTime: 2023-02-14 16:40:43
 * @LastEditors: 孙文豪
 */
import { createVNode, render } from 'vue'
import confirm from './index.vue';
// 这里是确认提示框的逻辑
export default function ConfirmBox_e(config) {
  //  结构出所有参数
  const { content, title, rightTopCloseButton, cilckMaskOffBox, buttonConfigs, style } = config
  //  单独结构弹框参数
  if (style) {
    if (style.box) {
      var { top, bgColor, width, padding, borderRadius } = style.box
    }
    if (style.title) {
      var { titColor, titTextAlign, titLineHeight, titFontSize, titFontWeight } = style.title
    }
    if (style.content) {
      var { conColor, conTextAlign, conLineHeight, conFontSize, conFontWeight } = style.content
    }
  }

  //promise封装，ok执行resolve，close执行rejectlet
  return new Promise((res, rej) => {
    // 创建临时容器,方便执行后删除
    const temporaryContainer = document.createElement('div')
    // 设置临时容器class
    temporaryContainer.setAttribute('class', 'swh_confirm')
    // 挂在body上
    document.body.appendChild(temporaryContainer)
    // 点击确认时
    const ok = function () {
      // 删除元素
      setTimeout(() => {
        temporaryContainer.remove()
      }, 300);
      res()   //执行then
    }
    // 点击取消时
    const close = function (bool, onlyOff) {
      if (!bool) return
      // 删除整个遮罩层及弹窗
      setTimeout(() => {
        temporaryContainer.remove()
      }, 300);
      // onlyOff标识点击取消还是关闭
      rej(onlyOff)   //执行catch
    }
    // 传入配置参数
    const vnode = createVNode(confirm,
      {
        content,
        title,
        cilckMaskOffBox,
        rightTopCloseButton,
        buttonConfigs,
        top, bgColor, width, padding, borderRadius,
        titColor, titTextAlign, titLineHeight, titFontSize, titFontWeight,
        conColor, conTextAlign, conLineHeight, conFontSize, conFontWeight,
        ok,
        close
      })
    // 把虚拟节点渲染container中
    render(vnode, temporaryContainer)
  })
}



